<template>
  <basic-layout>
    <view class="order-page">
      <view class="header">
        <text class="title">购物车</text>
        <!-- <text class="edit">编辑</text> -->
        <nut-button size="small" @tap="toggleEdit" plain type="primary">{{
          isEditMode ? "完成" : "编辑"
        }}</nut-button>
      </view>

      <view class="goods-list">
        <view
          v-for="(item, index) in goodsList"
          :key="index"
          class="goods-item"
        >
          <myCheckbox v-model="item.checked" class="checkbox"></myCheckbox>
          <image
            class="goods-image"
            :src="item.image"
            mode="aspectFill"
          ></image>
          <view class="goods-info">
            <text class="goods-name">{{ item.name }}</text>
            <text class="goods-spec">{{ item.spec }}</text>
            <view class="goods-price">
              ￥{{ item.price }}
              <nut-input-number v-model="item.quantity" :step="1" />
            </view>
          </view>
        </view>
      </view>

      <view class="footer">
        <view class="select-all">
          <myCheckbox v-model="selectAll"> 全选 </myCheckbox>
        </view>
        <view class="total" v-if="!isEditMode">
          <text>合计：</text>
          <text class="price">¥{{ totalPrice }}</text>
        </view>
        <nut-button
          type="primary"
          shape="square"
          class="checkout-btn"
          @click="handleAction"
        >
          {{ isEditMode ? "删除" : `去结算 (${selectedCount})` }}
        </nut-button>
      </view>
    </view>
  </basic-layout>
</template>

<script lang="ts" setup>
import BasicLayout from "@/layouts/basic-layout.vue";
import { ref, computed } from "vue";
import Taro from "@tarojs/taro";
import { Checkbox } from "@nutui/nutui-taro";
import myCheckbox from "@/components/my-checkbox/index.vue";
const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
Taro.setNavigationBarTitle({
  title: "购物车",
});

interface GoodsItem {
  name: string;
  spec: string;
  price: number;
  image: string;
  quantity: number;
  checked: boolean;
}

const isEditMode = ref(false);

function toggleEdit() {
  isEditMode.value = !isEditMode.value;
}

function handleAction() {
  if (isEditMode.value) {
    // 删除选中的商品
    goodsList.value = goodsList.value.filter((item) => !item.checked);
  } else {
    // 去结算逻辑
    console.log("去结算");
    Taro.navigateTo({
      url: `/pages-detail/checkout/checkout`,
    });
  }
}

const goodsList = ref<GoodsItem[]>([
  {
    name: "醉义堂20年窖藏酒醉义堂20年窖藏酒醉义堂20年窖藏酒醉义0年窖藏酒醉义0年窖藏酒醉义堂20年窖藏酒",
    spec: "型号：6瓶装",
    price: 778,
    image: pic,
    quantity: 1,
    checked: true,
  },
  {
    name: "五粮液52度",
    spec: "型号：500ml",
    price: 1299,
    image: pic,
    quantity: 2,
    checked: false,
  },
]);

const selectAll = computed({
  get: () => goodsList.value.every((item) => item.checked),
  set: (val) => {
    goodsList.value.forEach((item) => {
      item.checked = val;
    });
  },
});

const totalPrice = computed(() => {
  return goodsList.value
    .filter((item) => item.checked)
    .reduce((sum, item) => sum + item.price * item.quantity, 0)
    .toFixed(2);
});

const selectedCount = computed(() => {
  return goodsList.value.filter((item) => item.checked).length;
});

function increaseQuantity(index: number) {
  goodsList.value[index].quantity++;
}

function decreaseQuantity(index: number) {
  if (goodsList.value[index].quantity > 1) {
    goodsList.value[index].quantity--;
  }
}
</script>

<style lang="scss">
.basic-layout__content {
  width: 750rpx;
}
.order-page {
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    // background: #eee;

    .title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .goods-list {
    margin-top: 20rpx;
    padding: 24rpx;

    .goods-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      // &.selected {
      //   background-color: #fafafa;
      // }

      .checkbox {
        margin-right: 20rpx;
        width: 40rpx;
        height: 40rpx;
      }

      .goods-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }

      .goods-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .goods-name {
          font-size: 28rpx;
          margin-bottom: 10rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; // 限制显示两行
          overflow: hidden;      // 隐藏超出部分
          text-overflow: ellipsis; // 超出部分显示省略号
        }

        .goods-spec {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 10rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; // 限制显示两行
          overflow: hidden;      // 隐藏超出部分
          text-overflow: ellipsis; // 超出部分显示省略号
        }

        .goods-price {
          font-size: 28rpx;
          color: #f2270c;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }

      .quantity-control {
        display: flex;
        align-items: center;

        .quantity {
          margin: 0 20rpx;
          font-size: 28rpx;
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 20rpx;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    font-size: 28rpx;

    .select-all {
      flex: 1;
      text-wrap: nowrap;
    }

    .total {
      flex: 2;
      text-align: right;
      padding-right: 20rpx;

      .price {
        color: #f2270c;
        font-weight: bold;
      }
    }

    .checkout-btn {
      width: 200rpx;
      // background-color: #f2270c;
      // border: none;
      border-radius: 40rpx;
      height: 72rpx;
      // line-height: 60rpx;
      // color: #fff;
    }
  }
}
.jsbtn {
  width: 60rpx;
  height: 60rpx;
  // line-height: 60rpx;
  // border-radius: 4rpx;
}
</style>
